<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
	<h1 style="text-align: center;">用户管理系统</h1>
		<template>
			<el-table :data="student_data" style="width: 100%" stripe>
				<el-table-column type="selection" width="30"></el-table-column>
				<el-table-column prop="id" label="编号" width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip></el-table-column>
				<el-table-column prop="sex" label="性别" width="70" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" show-overflow-tooltip>
					<template slot="header" slot-scope="slot">
						<samp>操作&emsp;</samp>
						<el-button type="success" size="mini" round >添加</el-button>
						<el-button type="danger" size="mini" round @click="open">删除所选</el-button>
					</template>
					<template>
						<el-button type="text" @click="open"></el-button>
					</template>
					<template slot-scope="scope">
						<el-button type="primary" size="mini" round>删除</el-button>
						<el-button type="text" @click="dialogFormVisible = true">编辑</el-button>
						
						<el-dialog title="修改列表" :visible.sync="dialogFormVisible">
						  <el-form :model="form">
						    <el-form-item label="修改名字" :label-width="formLabelWidth">
						      <el-input v-model="form.name" autocomplete="off"></el-input>
						    </el-form-item>
						    <el-form-item label="修改性别" :label-width="formLabelWidth">
						      <el-select v-model="form.region" placeholder="">
						        <el-option label="男" value="shanghai"></el-option>
						        <el-option label="女" value="beijing"></el-option>
						      </el-select>
						    </el-form-item>
						  </el-form>
						  <div slot="footer" class="dialog-footer">
						    <el-button @click="dialogFormVisible = false">取 消</el-button>
						    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</template>
</div>
<script>
new Vue({
el:"#app",
data() {
  return {
	student_data: [{
		id: '1',
		name: '张三',
		sex:'男'
	}, {
		id: '2',
		name: '李四',
		sex:'男'
	}, {
		id: '3',
		name: '王五',
		sex:'男'
	}],
	multipleSelection: [],
			dialogTableVisible: false,
	        dialogFormVisible: false,
	        form: {
	          name: '',
	          region: '',
	          date1: '',
	          date2: '',
	          delivery: false,
	          type: [],
	          resource: '',
	          desc: ''
	        },
	        formLabelWidth: '120px'
		};
	},
	methods: {
      open() {
        this.$confirm('删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
});
</script>
</body>
</html>

